import React, { Component } from 'react'
//需要一个路由容器（组件）
import { Route, Routes, Navigate, Link } from 'react-router-dom'
import Login from './views/login/Login'
import Home from './views/home/Home'
import Movies from './views/home/home_modules/movies/Movies'
import Cinema from './views/home/home_modules/cinema/Cinema'
import My from './views/home/home_modules/my/My'
import CinemaDetail from './views/cinemaDetail/CinemaDeatil'
import Seat from './views/seat/Seat'



export default class App extends Component {
  render() {
    return (
      <div>
        {/* <Link to={'/home'}>首页</Link> */}
        {/* <Link to={'/login'}>登录</Link> */}
        {/* <Link to={'/cinemaDetail'}>影院</Link> */}
        {/* <Link to={'/seat'}>选座</Link> */}
        {/* Routes：根据地址决定渲染哪个组件 */}
        <Routes>
          {/* 路由重定向 */}
          <Route path='/' element={<Navigate to={'/login'}></Navigate>}></Route>

          {/* Route: 将url与react组件一一对应起来{path='/login', component:Login} */}
          <Route path='/login' element={<Login></Login>}></Route>

          <Route path='/home' element={<Home></Home>}>
            {/* 二级路由 */}
            {/* 重定向 */}
            <Route path='/home' element={<Navigate to={'/home/movies'}></Navigate>}></Route>
            {/* /home/movie 就等于movie 写了/就要写全*/}
            <Route path='movies' element={<Movies></Movies>}></Route>
            <Route path='cinema' element={<Cinema></Cinema>}></Route>
            <Route path='my' element={<My></My>}></Route>
          </Route>

          <Route path='/cinemaDetail' element={<CinemaDetail></CinemaDetail>}></Route>

          <Route path='/seat' element={<Seat></Seat>}></Route>



          {/* 404  */}
          <Route path='/*' element={<h1>404 Not Found</h1>}></Route>
        </Routes>


      </div>
    )
  }
}
